<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import SearchBar from "../../components/SearchBar/SearchBar.vue";

const router = useRouter();
const searchQuery = ref("");
const activeFilter = ref("all");
const activeSubFilter = ref("");
const showSubFilters = ref(false);

// 模拟的帖子数据
const posts = ref([
  { id: 1, image: "https://picsum.photos/300/180?random=1", description: "分享5款妆容，真的好清爽。", likes: 1700, username: "美妆邂逅", date: "02-09" },
  { id: 2, image: "https://picsum.photos/300/180?random=2", description: "超详细全妆教程，新手也能学会！", likes: 313000, username: " Bars美", date: "04-09" },
  { id: 3, image: "https://picsum.photos/300/180?random=3", description: "厌世狐狸眼，无辜兔眼妆教程！", likes: 150000, username: "真真", date: "05-19" },
  { id: 4, image: "https://picsum.photos/300/180?random=4", description: "轻欧美妆容教程，氛围感超强！", likes: 3892, username: "芒果柚柚子", date: "05-21" },
  { id: 5, image: "https://picsum.photos/300/180?random=5", description: "夏季清透裸妆，自然又高级！", likes: 8560, username: "小仙女", date: "05-15" },
  { id: 6, image: "https://picsum.photos/300/180?random=6", description: "法式优雅妆容，游玩必备！", likes: 12300, username: "美妆达人", date: "05-10" },
]);

// 筛选帖子
const filteredPosts = computed(() => {
  let result = [...posts.value];

  // 搜索功能
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    result = result.filter(post => post.description.toLowerCase().includes(query));
  }

  // 二级标签筛选
  if (activeSubFilter.value) {
    result = result.filter(post => post.description.includes(activeSubFilter.value));
  }

  return result;
});

// 跳转到帖子详情页面
function goToPost(postId: number) {
  router.push(`/post/${postId}`);
}
</script>

<template>
  <div class="search-page">
    <header class="top-bar">
      <div class="back-button" @click="router.back()">
        <i class="back-icon"></i>
      </div>
      <div class="title">妆容</div>
      <div class="right-controls">
        <!-- 这里放置其他控制按钮 -->
      </div>
    </header>

    <main class="posts-container">
      <SearchBar
          v-model="searchQuery"
          :active-filter="activeFilter"
          :active-sub-filter="activeSubFilter"
          :show-sub-filters="showSubFilters"
          @update:active-filter="activeFilter = $event"
          @update:active-sub-filter="activeSubFilter = $event"
          @update:show-sub-filters="showSubFilters = $event"
      />

      <div class="posts-grid">
        <div
            v-for="post in filteredPosts"
            :key="post.id"
            class="post-item"
            @click="goToPost(post.id)" 
        >
          <img :src="post.image" alt="Post image" class="post-image" />
          <div class="post-info">
            <p class="post-desc">{{ post.description }}</p>
            <div class="post-meta">
              <div class="user-info">
                <img src="https://picsum.photos/30/30" alt="User avatar" class="user-avatar">
                <span class="username">{{ post.username }}</span>
              </div>
              <div class="post-stats">
                <span class="likes">
                  <i class="heart-icon"></i>
                  {{ post.likes }}
                </span>
                <span class="date">{{ post.date }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <p v-if="filteredPosts.length <= 0" class="empty-hint">没有找到相关内容</p>
    </main>
  </div>
</template>

<style src="./Search.css"></style>